/** @type {HTMLCanvasElement} */
const canvas = document.getElementById('canvas1')
const ctx = canvas.getContext('2d')
const CANVAS_WIDTH = canvas.width = 500
const CANVAS_HEIGHT = canvas.height = 1000

const numberOfEnemies = 50
const enemiesArray = []

let gameFrame = 0

// 293 155
// class Enemy {
//     constructor() {
//         this.image = new Image()
//         this.image.src = '/images/enemy1.png'
//         // this.speed = Math.random() * 4 - 2
//         this.spriteWidth = 293
//         this.spriteHeight = 155
//         this.width = this.spriteWidth / 2.5
//         this.height = this.spriteHeight / 2.5
//         this.x = Math.random() * (canvas.width - this.width)
//         this.y = Math.random() * (canvas.height - this.height)
//         this.frame = 0
//         this.frameSpeed = Math.floor(Math.random() * 3 + 1)
//     }
//     update() {
//         this.x += Math.random() * 15 - 7.5
//         this.y += Math.random() * 15 - 7.5
//         if(gameFrame % this.frameSpeed === 0) {
//             this.frame > 4 ? this.frame = 0 : this.frame++
//         }
//     }
//     draw() {
//         // ctx.fillRect(this.x, this.y, this.width, this.height)
//         // ctx.strokeRect(this.x, this.y, this.width, this.height)
//         ctx.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
//     }
// }

// 266 188
// class Enemy {
//     constructor() {
//         this.image = new Image()
//         this.image.src = '/images/enemy2.png'
//         this.speed = Math.random() * 4 + 1
//         this.spriteWidth = 266
//         this.spriteHeight = 188
//         this.width = this.spriteWidth / 2.5
//         this.height = this.spriteHeight / 2.5
//         this.x = Math.random() * (canvas.width - this.width)
//         this.y = Math.random() * (canvas.height - this.height)
//         this.frame = 0
//         this.frameSpeed = Math.floor(Math.random() * 3 + 1)
//         this.angle = 0
//         this.angleSpeed = Math.random() * .2
//         this.curve = Math.random() * 7
//     }
//     update() {
//         this.x -= this.speed
//         this.y += this.curve * Math.sin(this.angle)
//         this.angle += this.angleSpeed
//         if(this.x + this.width < 0) this.x = CANVAS_WIDTH
//         if(gameFrame % this.frameSpeed === 0) {
//             this.frame > 4 ? this.frame = 0 : this.frame++
//         }
//     }
//     draw() {
//         // ctx.fillRect(this.x, this.y, this.width, this.height)
//         // ctx.strokeRect(this.x, this.y, this.width, this.height)
//         ctx.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
//     }
// }

// 218 177
// class Enemy {
//     constructor() {
//         this.image = new Image()
//         this.image.src = '/images/enemy3.png'
//         this.speed = Math.random() * 4 + 1
//         this.spriteWidth = 218
//         this.spriteHeight = 177
//         this.width = this.spriteWidth / 2
//         this.height = this.spriteHeight / 2
//         this.x = Math.random() * (canvas.width - this.width)
//         this.y = Math.random() * (canvas.height - this.height)
//         this.frame = 0
//         this.frameSpeed = Math.floor(Math.random() * 3 + 1)
//         this.angle = 0
//         this.angleSpeed = Math.random() * 1.5 + .5
//         this.curve = Math.random() * 200 + 50
//     }
//     update() {
//         this.x = CANVAS_WIDTH/2 * Math.sin(this.angle * Math.PI/90) + (CANVAS_WIDTH/2 - this.width/2)
//         this.y = CANVAS_HEIGHT/2 * Math.cos(this.angle * Math.PI/270) + (CANVAS_HEIGHT/2 - this.height/2)
//         this.angle += this.angleSpeed
//         if(this.x + this.width < 0) this.x = CANVAS_WIDTH
//         if(gameFrame % this.frameSpeed === 0) {
//             this.frame > 4 ? this.frame = 0 : this.frame++
//         }
//     }
//     draw() {
//         // ctx.fillRect(this.x, this.y, this.width, this.height)
//         // ctx.strokeRect(this.x, this.y, this.width, this.height)
//         ctx.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
//     }
// }

// 218 177
// class Enemy {
//     constructor() {
//         this.image = new Image()
//         this.image.src = '/images/enemy4.png'
//         this.speed = Math.random() * 4 + 1
//         this.spriteWidth = 213
//         this.spriteHeight = 212
//         this.width = this.spriteWidth / 2
//         this.height = this.spriteHeight / 2
//         this.x = Math.random() * (canvas.width - this.width)
//         this.y = Math.random() * (canvas.height - this.height)
//         this.newX = Math.random() * (canvas.width - this.width)
//         this.newY = Math.random() * (canvas.height - this.height)
//         this.frame = 0
//         this.frameSpeed = Math.floor(Math.random() * 3 + 1)
//         this.angle = 0
//         this.angleSpeed = Math.random() * 1.5 + .5
//         // this.curve = Math.random() * 200 + 50
//         this.interval = Math.floor(Math.random() * 200 + 50)
//     }
//     update() {
//         if(gameFrame % this.interval == 0) {
//             this.newX = Math.random() * (canvas.width - this.width)
//             this.newY = Math.random() * (canvas.height - this.height)
//         }
//         let dx = this.x - this.newX
//         let dy = this.y - this.newY
//         this.x -= dx / 70
//         this.y -= dy / 70
//         // this.x = CANVAS_WIDTH/2 * Math.sin(this.angle * Math.PI/90) + (CANVAS_WIDTH/2 - this.width/2)
//         // this.y = CANVAS_HEIGHT/2 * Math.cos(this.angle * Math.PI/270) + (CANVAS_HEIGHT/2 - this.height/2)
//         // this.angle += this.angleSpeed
//         if(this.x + this.width < 0) this.x = CANVAS_WIDTH
//         if(gameFrame % this.frameSpeed === 0) {
//             this.frame > 4 ? this.frame = 0 : this.frame++
//         }
//     }
//     draw() {
//         // ctx.fillRect(this.x, this.y, this.width, this.height)
//         // ctx.strokeRect(this.x, this.y, this.width, this.height)
//         ctx.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
//     }
// }

for(let i = 0; i < numberOfEnemies; i++) {
    enemiesArray[i] = new Enemy()
}

function animate() {
    let x = gameFrame
    setTimeout(()=>{
        if(gameFrame%100 == 0) console.log(gameFrame - x);;
    },1000)
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
    enemiesArray.forEach(enemy => {
        enemy.update()
        enemy.draw()
    })
    gameFrame++
    requestAnimationFrame(animate)
}
animate()